<script setup lang="ts">
import type { ClassificationTree } from '@/models/Classification/ClassificationTree'
import type { FormInstance } from 'ant-design-vue'
import type { ComputedRef } from 'vue'
import { ref } from 'vue'
import { computed } from 'vue'
import { reactive } from 'vue'
import { TestTypeKey, TestTypeList } from '../../constants/RandomTesting'

export interface ChangeClassificationFormProps {
  classificationTree?: ClassificationTree[]
}

const props = withDefaults(defineProps<ChangeClassificationFormProps>(), {
  classificationTree: () => [],
})

const formRef = ref<FormInstance>()
export interface FormState {
  classification: string
  secondaryClassification: string
  testType: TestTypeKey
}
const formState = reactive<FormState>({
  classification: '',
  secondaryClassification: '',
  testType: TestTypeKey.NotDone,
})

const secondaryClassificatList: ComputedRef<ClassificationTree[]> = computed(() => {
  const loopLen = props.classificationTree.length
  for (let i = 0; i < loopLen; i++) {
    const classification = props.classificationTree[i]
    if (!classification.children || !classification.children.length) continue
    if (classification.code !== formState.classification) continue
    return classification.children
  }
  return []
})

function onChangeClassification() {
  formState.secondaryClassification = ''
}

function getFormState() {
  return { ...formState }
}

function resetFormStata() {
  formState.classification = ''
  formState.secondaryClassification = ''
  formState.testType = TestTypeKey.NotDone
}

function setFormStata(formData: Partial<FormState>) {
  formState.classification = formData.classification || ''
  formState.secondaryClassification = formData.secondaryClassification || ''
  formState.testType = formData.testType || TestTypeKey.NotDone
}

defineExpose({
  getFormState,
  setFormStata,
  resetFormStata,
})
</script>

<template>
  <AForm
    ref="formRef"
    :model="formState"
    :label-col="{ span: 4 }"
    :wrapper-col="{ span: 19 }"
    autocomplete="off"
  >
    <AFormItem label="一级分类" name="classification">
      <ASelect
        v-model:value="formState.classification"
        allow-clear
        @change="onChangeClassification"
      >
        <template v-for="item of props.classificationTree" :key="item.id">
          <ASelectOption :value="item.code">{{ item.value }}</ASelectOption>
        </template>
      </ASelect>
    </AFormItem>
    <AFormItem label="二级分类" name="secondaryClassification">
      <ASelect v-model:value="formState.secondaryClassification" allow-clear>
        <template v-for="item of secondaryClassificatList" :key="item.id">
          <ASelectOption :value="item.code">{{ item.value }}</ASelectOption>
        </template></ASelect
      >
    </AFormItem>
    <AFormItem label="测试类型" name="testType">
      <ARadioGroup v-model:value="formState.testType">
        <template v-for="item of TestTypeList" :key="item.key">
          <ARadio :value="item.key">{{ item.label }}</ARadio>
        </template>
      </ARadioGroup>
    </AFormItem>
  </AForm>
</template>
